const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
module.exports = {
    entry:'./src/main.js',
    module:{
        rules:[
            {
                test:/\.vue$/,
                exclude:'/node_modules',
                loader:'vue-loader'
            },
            {
                test:/\.js$/,
                use:{
                   loader:'babel-loader',
                   options:{
                       presets:['@babel/preset-env']
                   } 
                },
                exclude: /node_modules/,
            },
            {
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test:/\.(png|jpg|gig)$/,
                loader:'url-loader',
                options: {
                    limit: 1024,
                    esModule: false
                }
            },
            {
                test: /\.css$/,
                use: 
                [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            esModule: false
                        }
                    },
                ]
            },
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:'我的一个手动配置的webpack项目',
            template: 'public/index.html'
        }),
        new VueLoaderPlugin(),
        new CleanWebpackPlugin(),
        new ESLintPlugin({files:'./src',failOnError:true})
    ]
}